<!--
 * @Author: weikang
 * @Description:
 * @Date: 2024-01-09 20:50:23
 * @LastEditTime: 2024-03-01 22:48:05
 * @FilePath: \env-manager-pc\src\views\contract\manager\manager.edit.vue
-->
<script setup lang="ts">
import { debounce } from 'lodash-es'
import type { FormInstance } from 'element-plus'
import { rules, useContractForm } from './createHelper'
import { useOwnerOrgs } from '@/utils/dataHook'
import { ModelType } from '@/types/common'
import type { ModelOpen } from '@/types/page'

const emits = defineEmits(['submit', 'refreshList'])
const OwnerList = useOwnerOrgs()
const dialogVisible = ref(false)
const defaultProps = {
  children: 'Children',
  label: 'Name',
}
const { formData, initForm } = useContractForm()
const formRef = ref<FormInstance>()
const btnLoading = ref(false)
const modelType = ref(ModelType.add)
function handleClose() {
  close()
}

const file1Ref = ref()
const file2Ref = ref()

const files1 = ref<any[]>([])
const files2 = ref<any[]>([])

const title = computed(() => {
  return formData.value.ObjID ? '编辑合同' : '新增合同'
})

function open(options: ModelOpen) {
  modelType.value = options.type
  if (options.data) {
    formData.value = { ...options.data }
    const { Files = {} } = options.data
    const file1 = Files['1']
    const file2 = Files['2']
    if (file1) {
      file1.name = file1.FileName
    }
    if (file2) {
      file2.name = file2.FileName
    }
    files1.value = file1 ? [file1] : []
    files2.value = file2 ? [file2] : []
    // getFile()
  }
  dialogVisible.value = true
}

function doLoading(flag: boolean) {
  btnLoading.value = flag
}

function submit() {
  formRef.value?.validate((vaild) => {
    if (vaild) {
      emits('submit', formData.value, doLoading)
    }
  })
}

function upload(ObjID: string) {
  file1Ref.value.submit(ObjID)
  file2Ref.value.submit(ObjID)
}

function close() {
  dialogVisible.value = false
  btnLoading.value = false
  initForm()
}

const refreshList = debounce(() => {
  emits('refreshList')
}, 500)

// function getFile() {
//   contractApi.GetContractFile({ contractObjID: formData.value.ObjID, fileType: 1 }).then((res) => {
//     console.log('%c [ res ]-65', 'font-size:13px; background:pink; color:#bf2c9f;', res)
//     files.value = res
//   })
// }

defineExpose({
  open,
  close,
  upload,
})
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    append-to-body
    :title="title"
    width="80%"
    top="1%"
    @closed="handleClose"
  >
    <div class="max-h-[65vh] overflow-x-hidden overflow-y-auto">
      <ElForm ref="formRef" :model="formData" label-width="180px" label-position="top" label-suffix="：" :rules="rules">
        <ElRow :gutter="30">
          <ElCol :span="12">
            <ElFormItem label="运维公司" prop="OwnerOrgObjID">
              <el-tree-select
                v-model="formData.OwnerOrgObjID"
                value-key="Code"
                class="w-full"
                :data="OwnerList"
                :render-after-expand="false"
                :props="defaultProps"
                clearable check-strictly
              />
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem label="合同编号" prop="ContractCode">
              <ElInput v-model="formData.ContractCode" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem label="合同金额（元）" prop="TotalMoney">
              <ElInputNumber v-model="formData.TotalMoney" class="w-full" :controls="false" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem label="合同生效时间" prop="StartTime">
              <el-date-picker
                v-model="formData.StartTime"
                type="date"
                value-format="YYYYMMDD"
                placeholder="合同生效时间"
                class="w-full!"
              />
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem label="合同结束时间" prop="EndTime">
              <el-date-picker
                v-model="formData.EndTime"
                type="date"
                value-format="YYYYMMDD"
                placeholder="合同结束时间"
                class="w-full!"
              />
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem label="实收金额（元）" prop="IncomeMoney">
              <ElInputNumber v-model="formData.IncomeMoney" class="w-full" :controls="false" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem label="收款日期" prop="IncomeTime">
              <el-date-picker
                v-model="formData.IncomeTime"
                type="date"
                value-format="YYYYMMDD"
                placeholder="合同结束时间"
                class="w-full!"
              />
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem label="开票金额（元）" prop="InvoiceMoney">
              <ElInputNumber v-model="formData.InvoiceMoney" class="w-full" :controls="false" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem label="开票日期" prop="InvoiceTime">
              <el-date-picker
                v-model="formData.InvoiceTime"
                type="date"
                value-format="YYYYMMDD"
                placeholder="合同结束时间"
                class="w-full!"
              />
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem label="合同联系人" prop="ContactPerson">
              <ElInput v-model="formData.ContactPerson" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="12">
            <ElFormItem label="合同联系电话" prop="ContactTel">
              <ElInput v-model="formData.ContactTel" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="24">
            <ElFormItem label="备注" prop="Remark">
              <ElInput v-model="formData.Remark" type="textarea" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="24">
            <ElFormItem label="合同附件" prop="LimitLower">
              <ContractFileUpload :id="formData.ObjID" ref="file1Ref" :file-type="1" :notip="false" :files="files1" @on-success="refreshList" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="24">
            <ElFormItem label="发票附件" prop="Location">
              <ContractFileUpload :id="formData.ObjID" ref="file2Ref" :file-type="2" :notip="false" :files="files2" @on-success="refreshList" />
            </ElFormItem>
          </ElCol>
        </ElRow>
      </ElForm>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="btnLoading" @click="submit">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
